<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <script>
        window.onload=function () {
            var ele = document.getElementsByTagName("html")[0];
            function changeSize() {
                var width = document.documentElement.getBoundingClientRect().width;
                var size = width / 10;
                console.log(width);
                ele.style.fontSize=size+"px";
            }
            window.addEventListener("resize",function () {
                changeSize();
            })
            window.addEventListener("pageshow",function () {
                changeSize();
            })
        }
    </script>
    <style>
        body,div,h4,p,img{
            margin: 0;
            padding: 0;
        }
        body{
            font-size:12px;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .clear:after{
            content:"";
            clear: both;
            display: block;
            overflow: hidden;
        }
        .content{
            margin: 0 .4rem;
            width:9.6rem;
            overflow: hidden;
        }
        .item{
            width:100%;
            margin-top: 0.4rem;
        }
        .item .img{
            width:3rem;
            height: auto;
        }
        .item-content{
            margin: 0 .4rem 0 .2rem;
            width:6rem;
            overflow: hidden;
        }
        h4.item-tit{
            font-weight: normal;
            font-size:.427rem;
        }
        .item-tit,
        .item-small{
            padding-bottom: .2rem;
        }
        .item-small{
            color:#666;
            font-size:.32rem;
        }
        .item-price{
            color:#333;
            font-size:.32rem;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="item clear">
        <img src="images/01.jpg" alt="" class="img fl">
        <div class="fr item-content">
            <h4 class="item-tit">Python3入门机器学习 经典算法与应用</h4>
            <p class="item-small">中级 · 1403人在学</p>
            <p class="item-price">￥400</p>
        </div>
    </div>
</div>
</body>
</html>